<script lang="ts" setup>
import { transformI18n } from '@/plugins/i18n'

const emit = defineEmits<{
  (e: 'search')
  (e: 'clear')
}>()
// 查询
function onSearch() {
  emit('search')
}
// 清空
function onClear() {
  emit('clear')
}

const expand = ref(false)
</script>

<template>
  <a-card style="margin-bottom: 10px">
    <div class="table-query-container">
      <slot name="default" v-bind="{ expand }"></slot>
    </div>
    <div class="table-query-btn">
      <a-button @click="onClear">{{ transformI18n('table.query.clear') }}</a-button>
      <a-button type="primary" @click="onSearch">{{
        transformI18n('table.query.search')
      }}</a-button>
      <a style="font-size: 12px" @click="expand = !expand">
        <Icon v-if="expand" type="icon-up" />
        <Icon v-else type="icon-down" />
        {{ transformI18n('table.query.screening') }}</a
      >
    </div>
  </a-card>
</template>

<style scoped>
.table-query-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-query-btn > * {
  margin-right: 15px;
}
</style>
